<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <script src="/static/js/jquery.min.js"></script>
    <link rel="Shortcut Icon" href="/static/player/images/icon.png">
    <style>
        .sidebar {
            min-height: 100vh;
            background-color: #f8f9fa;
            padding-top: 20px;
            border-right: 1px solid #dee2e6;
        }
        .sidebar .nav-link {
            color: #333;
            padding: 0.5rem 1rem;
            margin-bottom: 5px;
        }
        .sidebar .nav-link:hover {
            background-color: #e9ecef;
        }
        .sidebar .nav-link.active {
            background-color: #e9ecef;
            font-weight: bold;
        }
        .content-area {
            padding: 20px;
        }
        .user-info {
            border-top: 1px solid #dee2e6;
            padding-top: 15px;
            margin-top: 15px;
        }
        .search-form {
            padding: 15px;
            border-bottom: 1px solid #dee2e6;
            margin-bottom: 15px;
        }
    </style>
    {% block head %}{% endblock %}
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <!-- 左侧边栏 -->
        <div class="col-md-3 col-lg-2 sidebar">
            <h3 class="text-center mb-4">音乐推荐系统</h3>
            
            <!-- 搜索表单 -->
            <div class="search-form">
                <form method="get" action="/search">
                    <div class="form-group">
                        <input class="form-control" type="search" placeholder="输入搜索信息" aria-label="Search" name="keyword">
                    </div>
                    <div class="d-flex justify-content-between">
                        <button class="btn btn-outline-success btn-sm" type="submit" name="action" value="song_name">搜歌曲</button>
                        <button class="btn btn-outline-primary btn-sm" type="submit" name="action" value="artist_name">搜歌手</button>
                    </div>
                </form>
            </div>
            
            <!-- 导航菜单 -->
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link" href="/all/">全部音乐</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/recommend">推荐音乐</a>
                </li>
                {% if request.user.is_authenticated %}
                <li class="nav-item">
                    <a class="nav-link" href="/user">用户中心</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/history/">播放历史</a>
                </li>
                {% endif %}
            </ul>
            
            <!-- 用户信息 -->
            <div class="user-info">
                {% if request.user.is_authenticated %}
                <div class="text-center mb-3">
                    <span style="font-weight: bolder;color: orange;">{{ request.user }}</span>
                </div>
                <div class="d-flex justify-content-around">
                    <a class="btn btn-outline-secondary btn-sm" href="/user">个人中心</a>
                    <a class="btn btn-outline-danger btn-sm" href="/logout">注销</a>
                </div>
                {% else %}
                <div class="d-flex justify-content-around">
                    <a class="btn btn-outline-primary btn-sm" href="/sign_in">登录</a>
                    <a class="btn btn-outline-success btn-sm" href="/sign_up">注册</a>
                </div>
                {% endif %}
            </div>
            
            <!-- 管理链接 -->
            <div class="text-center mt-4">
                <a href="/admin" target="_blank" class="btn btn-outline-dark btn-sm">后台管理系统</a>
            </div>
        </div>
        
        <!-- 右侧内容区域 -->
        <div class="col-md-9 col-lg-10 content-area">
            {% block alert %}
                {% if messages %}
                    {% for message in messages %}
                        {% if message.tags != 'console' %}
                            <div class="alert alert-{{ message.tags }}" role="alert">
                                {{ message }}
                            </div>
                        {% endif %}
                    {% endfor %}
                {% endif %}
            {% endblock %}

            {% block body %}{% endblock %}

            <div class="card mt-4">
                <div class="card-footer text-center">Copyright(C). Create By BHML 2024, All Rights Reserved.</div>
            </div>

            {% block footer %}{% endblock %}
        </div>
    </div>
</div>
</body>
</html>